<!--
 * @Author: your name
 * @Date: 2020-08-22 01:51:42
 * @LastEditTime: 2020-08-27 20:32:23
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \exam-list\src\components\checkpaper\PaperDetail.vue
-->
<template>
  <div>
    <p>试卷列表</p>
    <Card>
      <div class="top">
        <p>
          <span>课程:</span>
          <Select v-model="obj.subject_id" style="width:200px" label="请选择考试类型">
            <Option
              v-for="item in examlist"
              :value="item.subject_id"
              :key="item.subject_id"
              placeholdren="请选择考试类型"
            >{{ item.subject_text }}</Option>
          </Select>
        </p>
        <p>
          <span>考试类型:</span>
          <Select v-model="obj.exam_id" style="width:200px" label="考试课程">
            <Option
              v-for="item in examType"
              :value="item.exam_id"
              :key="item.exam_id"
              placeholdren="考试课程"
            >{{ item.exam_name }}</Option>
          </Select>
        </p>
        <p>
          <Button type="primary" @click="lookList">🔍查询</Button>
        </p>
      </div>
    </Card>
    <Card>
      <Table :columns="columns1" :data="examListType">
        <template slot-scope="{ row }" slot="gets">{{row.grade_name.join(' ')}}</template>
      </Table>
    </Card>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
export default {
  data() {
    return {
      obj: [
        {
          subject_id: '',
          exam_id: ''
        }
      ],
      cityList: {},
      columns1: [
        {
          title: '试卷信息',
          key: 'title'
        },
        {
          title: '班级',
          key: 'grade_name',
          slot: 'gets'
        },
        {
          title: '创建人',
          key: 'user_name'
        },
        {
          title: '开始时间',
          key: 'start_time'
        },
        {
          title: '结束时间',
          key: 'end_time'
        }
      ]
    }
  },
  computed: {
    ...mapState('Exam', ['examListType', 'examlist', 'examType'])
  },
  methods: {
    ...mapActions('Exam', [
      'getList',
      'ExamType',
      'getExamListnum'
    ]),
    lookList() {
      console.log('没功能')
    }
  },
  created() {
    this.getExamListnum()
    this.getList()
    this.ExamType()
    // console.log(this.examListType)
  }
}
</script>

<style lang="scss" scoped>
.top {
  width: 100%;
  display: flex;
  p {
    margin-left: 30px;
  }
}
</style>
